<%@ page import="com.zjitc.model.User" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.net.URLDecoder" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会员登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }

        .container .row div {
            /* position:relative;
            float:left; */
        }

        font {
            color: #666;
            font-size: 22px;
            font-weight: normal;
            padding-right: 17px;
        }
    </style>
</head>
<body>


<jsp:include page="head.jsp"/>
<%--<%--%>
<%--Cookie[] cookies = request.getCookies();--%>
<%--if (cookies != null && cookies.length > 0) {--%>
<%--for (Cookie cookie : cookies) {--%>
<%--String cookieName = cookie.getName();--%>
<%--if ("user".equals(cookieName)) {--%>
<%--String s = cookie.getValue();--%>
<%--String ss = URLDecoder.decode(s, "utf-8");--%>
<%--Gson gson = new Gson();--%>
<%--User user = gson.fromJson(ss, User.class);--%>
<%--session.setAttribute("ss", ss);--%>
<%--out.println(user);--%>
<%--System.out.println("哇啊阿发啊cookie"+user);--%>
<%--}--%>
<%--}--%>
<%--}--%>
<%--%>--%>

<div class="container"
     style="width:100%;height:460px;background:#FF2C4C url('${pageContext.request.contextPath}/img/l1.jpg') no-repeat;">
    <div class="row">
        <div class="col-md-7">
            <!--<img src="${pageContext.request.contextPath}/image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
        </div>

        <div class="col-md-5">
            <div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
                <font>会员登录</font>USER LOGIN

                <div>&nbsp;</div>
                <form class="form-horizontal" id="loginForm">

                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">

                        </div>
                        <span id="warn"></span>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="inputPassword3" placeholder="请输入验证码">
                        </div>
                        <div class="col-sm-0">
                            <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
                            <label><img type="image" src="/authCode.do" id="codeImage" onclick="chageCode()"
                                        title="图片看不清？点击重新得到验证码" style="cursor:pointer;"/>
                                <a href="javascript:void (0)" onclick="chageCode()">换一张</a>
                            </label>
                        </div>
                    </div>
                    <%--<div class="form-group">--%>
                        <%--<div class="col-sm-offset-2 col-sm-10">--%>
                            <%--<div class="checkbox">--%>
                                <%--<label>--%>
                                    <%--<input type="checkbox" id="autoLogin"> 自动登录--%>
                                <%--</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--%>
                                <%--<label>--%>
                                    <%--&lt;%&ndash;<a>忘记密码</a>&ndash;%&gt;--%>
                                    <%--<input type="checkbox"> 记住用户名--%>
                                <%--</label>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="button" width="100" value="登录" name="submit" id="loginSubmit" border="0"
                                   style="background: url('${pageContext.request.contextPath}/images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                                           height:35px;width:100px;color:white;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<jsp:include page="foot.jsp"/>

<script>
    function chageCode() {
        $("#codeImage").attr("src", "${pageContext.request.contextPath}/authCode.do?abc="
            + Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
    }

    function validateCode() {
        $.ajax(
            {
                url: "${pageContext.request.contextPath}/validate.do",
                data: {
                    value: $("#inputPassword3").val()
                },
                success: function (res) {
                    if (res == -1) {
                        $("#inputPassword3").val("验证错误");
                        $("#inputPassword3").css("color", "red");
                        //刷新验证码图片
                        $("#codeImage").trigger("click");
                    }
                }
            }
        )
    }

    $("#inputPassword3").blur(function () {
        validateCode()
    })
    $("#inputPassword3").focus(function () {
        $("#inputPassword3").val("");
        $("#inputPassword3").css("color", "black");
    })
    $("#password").focus(function () {
        $("#password").val("");
        $("#warn").html("");
    })
    $("#loginSubmit").click(function (ev) {
        validateCode();
        var aaa = $("#autoLogin").prop("checked");
        console.log(aaa)
        var str = $("#inputPassword3").val();
        console.log(str)

        /**
         * 判断复选框是否选中、true,,false
         * @type {*|jQuery}
         */
        if (str != "验证错误") {
            if (aaa) {
                $.ajax(
                    {
                        type: "GET",
                        url: "${pageContext.request.contextPath}/user/autoLogin.do",
                        dataType: "text",
                        data: {
                            username: $("#username").val(),
                            password: $("#password").val(),
                        },
                        success: function (msg) {
                            returnMsg(msg)
                        }
                    }
                )
            } else {
                $.ajax(
                    {
                        type: "GET",
                        url: "${pageContext.request.contextPath}/user/login.do",
                        dataType: "text",
                        data: {
                            username: $("#username").val(),
                            password: $("#password").val()
                        },
                        success: function (msg) {
                            returnMsg(msg)
                        }
                    }
                )
            }
        }

    })

    function returnMsg(msg) {
        if (msg == 1) {
            location.href = "${pageContext.request.contextPath}/index.do";
        }
        if (msg == 100) {
            if (confirm("是否登录到管理员页面")) {
                location.href = "${pageContext.request.contextPath}/admin/login.do";
            } else {
                location.href = "${pageContext.request.contextPath}/index.do";
            }
        }
        if (msg == 0) {
            location.href = "/user/notActive.do";
        }
        if (msg == -1) {
            $("#warn").html("用户名或密码错误")
            $("#warn").css("color", "red");
        }
    }

</script>
</body>
</html>